import React, { useEffect, useState } from 'react';
import '../style/Login.scss';
import { user_login } from "../utils/api"
import { Button, Form, Input, Select, notification } from 'antd';
import { SmileOutlined, ExclamationCircleOutlined } from "@ant-design/icons"
import { useNavigate } from 'react-router-dom';
import { create_imgaction } from '../store/actionCreator/index'
import { connect } from 'react-redux';
const formItemLayout = {
    labelCol: {
        xs: {
            span: 24,
        },
        sm: {
            span: 8,
        },
    },
    wrapperCol: {
        xs: {
            span: 24,
        },
        sm: {
            span: 16,
        },
    },
};
const tailFormItemLayout = {
    wrapperCol: {
        xs: {
            span: 24,
            offset: 0,
        },
        sm: {
            span: 16,
            offset: 8,
        },
    },
};
function Login(props) {

    var navigate = useNavigate();
    const [form] = Form.useForm();
    const onFinish = (values) => {
        // console.log('Received values of form: ', values);
        user_login(values).then((res) => {
            // console.log(values);
            console.log(res.data)
            if (res.data.code == 200) {
                notification.success({
                    message: res.data.msg,
                    duration: 1.5,
                    icon: <SmileOutlined />
                });
                localStorage.setItem('token', res.data.token);
                props.useinfo(res.data.userinfo);
                localStorage.setItem('userinfo', JSON.stringify(res.data.userinfo));
                setTimeout(() => {
                    navigate('/');
                }, 1500)
            } else if (res.data.code == 400) {
                notification.error({
                    message: res.data.msg,
                    duration: 1.5,
                    icon: <ExclamationCircleOutlined />
                });
            }
            // console.log(res.data);
        })

    };


    const [autoCompleteResult, setAutoCompleteResult] = useState([]);
    const onWebsiteChange = (value) => {
        if (!value) {
            setAutoCompleteResult([]);
        } else {
            setAutoCompleteResult(['.com', '.org', '.net'].map((domain) => `${value}${domain}`));
        }
    };
    var toregister = () => {
        navigate('/register');
    }
    return (
        <div className='login'>

            <div className="box">

                <Form
                    {...formItemLayout}
                    form={form}
                    name="Register"
                    onFinish={onFinish}
                    scrollToFirstError
                >
                    <h4>系统登录</h4>
                    <Form.Item
                        name="phone"
                        label="手机号"
                        rules={[
                            {
                                // type: 'number',
                                required: true,
                                message: 'Please input your phone number!',
                            },
                            {
                                validator: (rule, value) => {
                                    let reg = new RegExp(/^(?:(?:\+|00)86)?1[3-9]\d{9}$/);
                                    if (reg.test(value) == false) {
                                        return Promise.reject('手机号不合规范');
                                    } else {
                                        return Promise.resolve();
                                    }
                                }
                            },
                        ]}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        name="pass"
                        label="密码"
                        rules={[
                            {
                                // type: 'number',
                                required: true,
                                message: 'Please input your password!',
                            },

                        ]}
                    >
                        <Input.Password />
                    </Form.Item>


                    <Form.Item className='mybutton' >
                        <Button type="primary" htmlType="submit">
                            登录
                        </Button>
                        <Button className='toregister' onClick={toregister}>注册</Button>
                    </Form.Item>
                </Form>
            </div>
        </div>
    );
}

export default connect(
    (state) => {
        return {
            
        }
    },
    (dispatch) => {
        return {
            useinfo: function (item) {
                dispatch(create_imgaction(item))
            }
        }
    }


)
    (Login);